<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="请输入应用名称" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table">
				<template #column-appSecret="{ scope }">
					<div class="secret">
						<span>{{ showAppId(scope.row) ? scope.row.appSecret : "********" }}</span>
						<img
							src="../../task/static/eye_open.png"
							@click="showAppIdList(scope.row)"
						/>
					</div>
				</template>
				<template #slot-reset="{ scope }">
					<el-button type="text" @click="onReset(scope.row)">重置</el-button>
				</template>
			</cl-table>
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" name="task-app" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const { service } = useCool();

const status = ref<number>(1);

// cl-upsert
const Upsert = useUpsert({
	items: [
		{ prop: "name", label: "名称", required: true, component: { name: "el-input" } },
		{
			prop: "status",
			value: status.value,
			label: "启用状态",
			component: { name: "cl-switch" },
			required: true
		},
		{
			prop: "description",
			label: "描述",
			component: { name: "el-input", props: { type: "textarea", rows: 5 } }
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{ type: "selection" },
		{ prop: "id", label: "ID", minWidth: 80 },
		{ prop: "name", label: "名称", minWidth: 140 },
		{ prop: "appId", label: "appId", minWidth: 140 },
		{ prop: "appSecret", label: "appSecret", minWidth: 140 },
		{ prop: "status", label: "启用状态", component: { name: "cl-switch" } },
		{ prop: "description", label: "描述", minWidth: 140, showOverflowTooltip: true },
		{ prop: "createTime", label: "创建时间", sortable: "desc", width: 160 },
		{ prop: "updateTime", label: "更新时间", sortable: "custom", width: 160 },
		{ type: "op", buttons: ["edit", "delete", "slot-reset"], width: 200 }
	]
});
//点击查看appId和appSecret，将数据存储道数组中
const appIdList = ref<any[]>([]);
const showAppIdList = (row: any) => {
	//判断数组中是否存在该数据，存在则删除，不存在则添加
	appIdList.value.includes(row.id)
		? appIdList.value.splice(
				appIdList.value.findIndex((items) => items.id == row.id),
				1
		  )
		: appIdList.value.push(row.id);
};
//显示appId和appSecret
const showAppId = (row: any) => {
	if (row) {
		const value = appIdList.value.findIndex((items) => items == row.id);
		return value != -1 ? true : false;
	}
};

//充值secret
const onReset = function (row: any) {
	ElMessageBox.confirm(`确定要重置appSecret？`, "提示", {
		type: "warning"
	})
		.then(() => {
			//调用重置方法
			service.task.app.reset({ id: row.id }).then(() => {
				ElMessage.success("重置成功");
			});
			Crud.value?.refresh();
		})
		.catch(() => null);
};

// cl-crud
const Crud = useCrud(
	{
		service: service.task.app
	},
	(app) => {
		app.refresh();
		console.log("app:", app);
	}
);
</script>
<style lang="scss" scoped>
.secret {
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		width: 20px;
		margin-left: 5px;
		cursor: pointer;
	}
}
</style>
